/* MEDIA QUERIES TODA LA PAGINA */

@media (max-width:768px){

	ul{
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		background-color: rgb(153, 160, 160);
		width: 100%;
		display: none;
	}

	li{
		margin-right: 0;
		margin-bottom: 10px;
		text-align: center;
	}

	.left-content, .right-content{
		flex-basis: 100%;
		text-align: center;
	}

	.inverted-right-content, .inverted-left-content{
		flex-basis: 100%;
		text-align: center;
		justify-content: center;
	}

	.left-content h1{
		font-size: 10px;
		margin-top: 180px;
	}

	img{
		display: block;
		margin: 0 auto;
		max-width: 280px;
		height: auto;
		text-align: center;
	}

	.nav-button{
		display: none;
		text-align: center;
	}

	header{
		margin-top: 80px;
	}

	#logo-navbar{
		min-width: 20px;
		margin-bottom: 10px;
		margin-top: 10px;
	}

	#nav-menu input{
		min-width: 40px;
		text-align: center;
		margin-right: 100px;
	}

	.card{
		flex-basis: 100%;
		text-align: center;
	}

	#author{
		margin: 100px 100px 100px 100px;
	}

	.footer-column{
		flex-basis: 100%;
		text-align: center;
	}

	.social-icons a{
		display: inline-block;
		margin-right: 10px;
		width: 20px;
	}
}

/* MARGENES PAGINA */

	*{padding: 0;
		margin: 0;
		box-sizing: border-box;}

/* BODY */

	body{
		background-clip: content-box;
		font-family: 'Delicious Handrawn', cursive;
	}

	/* NAV BAR */

	nav{
		background-color: rgb(153, 160, 160);
		position: relative;
		padding: 10px 20px;
		justify-content: center;
	}

	.nav-container{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#nav-menu{
		align-items: center;
		font-size: 20px;
	}

	#nav-menu input{
		margin-left: 100px;
		color: white;
		background-color: rgba(17, 16, 16, 0.945);
		padding: 10px 15px;
		border: none;
		cursor: pointer;
		/* border-radius: 20px; */
		z-index: 10;
		font-family: 'Delicious Handrawn', cursive;
		font-size: 20px;
		text-align: center;
	}

	ul{
		list-style-type: none;
		display: flex;
		margin: 0;
		padding: 0;
	}

	li{
		margin-right: 4%;
	}

	a{
		color: black;
		text-decoration: none;
	}

	#logo-navbar{
		max-width: 40px;
		height: auto;
		margin-right: 30px;
	}

	.nav-button{
		color: rgb(214, 240, 231);
		background-color: rgb(99, 64, 64);
		padding: 10px 15px;
		border: none;
		cursor: pointer;
		border-radius: 20px;
		z-index: 10;
		font-family: 'Delicious Handrawn', cursive;
		font-size: 20px;
	}


/* HEADER */

	header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 50px;
		flex-wrap: wrap;
		background-color: rgb(215, 223, 242);
	}

	.left-content{
		flex: 1;
		text-align: center;
		margin-right: 40px;
		margin-bottom: 60px;
		margin-top: 60px;
	}

	.left-content h1{
		font-size: 70px;
		margin-bottom: 30px;
	}

	.left-content p{
		font-size: 20px;
	}

	.right-content{
		flex: 1;
		text-align: right;
		margin-left: 20px;
	}

	.email-form{
		display: flex;
		margin-top: 20px;
		width: 100%;
		margin-bottom: 20px;
	}

	input[type="email"] {
		padding: 10px;
		margin-right: 10px;
		font-family: 'Delicious Handrawn', cursive;
		width: 100%;
		text-align: center;
		font-size: 20px;
	}

	button[type="submit"] {
		padding: 10px;
		margin-right: 8px;
		cursor: pointer;
		background-color: rgb(188, 179, 179);
		color: brown;
		border: none;
		border-radius: 10px;
		font-family: 'Delicious Handrawn', cursive;
		font-size: 20px;
	}

	.off{
		color: brown;
	}


/* img{max-width: 100%;
height: auto;} */

/* Estilo Cards */

	section{
		text-align: center;
		padding: 50px;
		background-color: rgb(230, 230, 242);
	}

	h2{
		margin-bottom: 20px;
		font-size: 50px;
	}

	.card-container{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.card{
		background-color: rgb(230, 230, 242);
		padding: 10px 10px 10px 10px;
		width: 30%;
		box-shadow: 0 2px 5px rgba(0,0,0,0.25);
		text-align: left;
		margin-bottom: 20px;
		border-radius: 15px;
		margin-top: 30px;
	}

	.card h3{
		padding-top: 10px;
	}

	.img-container img{
		max-width: 100%;
		height: 300px;
		padding: 0px 0px 0px 0px;
		margin: 20px 0;
	}

	.img-container{
		background-color: white;
		display: flex;
		justify-content: center;

	}

	.author-image{
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-top: 10px;
		margin-right: 30px;
	}

	.author-name{
		font-size: 14px;
	}

	.publication-date{
		font-size: 10px;
		color: dimgray;
	}

	#author{
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
		margin-top: 20px;
		align-items: center;
	}

	/* SECCION INVERSA */

	.inverted-content-container, .inverted-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		background-color: rgb(215, 223, 242);
	}

	.inverted-left-content{
		flex: 1;
		text-align: right;
		margin-left: 20px;
	}

	.inverted-right-content{
		flex: 1;
		text-align: center;
		margin-right: 40px;
		margin-bottom: 40px;
		margin-top: 60px;
		justify-content: center;
	}

	.inverted-section h1{
		font-size: 60px;
	}

	.inverted-section p{
		font-size: 20px;
	}

	/* img{
		max-width: 100%;
		height: auto;
	} */

	.inverted-right-content button{
		padding: 10px;
		margin-right: 8px;
		margin-top: 20px;
		cursor: pointer;
		background-color: rgb(188, 179, 179);
		color: brown;
		border: none;
		border-radius: 10px;
		font-family: 'Delicious Handrawn', cursive;
		font-size: 30px;
	}

	/* FOOTER */

	footer{
		background-color: rgb(153, 160, 160);
		padding: 20px;
		color: aliceblue;
	}

	.footer-container{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.footer-column{
		margin-bottom: 20px;
		flex-basis: calc(20%-20px);
	}

	.footer-column h1{
		cursor: pointer;
	}

	.footer-column a{
		display: block;
		color: black;
		text-decoration: none;
		margin-bottom: 10px;
	}

	.social-icons a{
		display: inline-block;
		margin-right: 10px;
	}

	.footer-bottom{
		text-align: center;
		font-size: 15px;
	}